<template>
  <div id="member">
    <div class="nav_header">
      <div class="shop_list">
        <span>全部会员数量</span><span class="text_1">{{this.userAllNum}}</span><span>个,</span><span>禁言会员数量</span><span
          class="text_2">{{this.forbiddenWords}}</span><span>个</span>
      </div>
      <div class="mem_tag">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="全部会员" name="first">
            <div class="men_id">
              <div class="bgc_3a"></div>
              <div>
                <el-row :gutter="20">
                  <el-col :span="6">
                    <div class="grid-content bg-purple">
                      <span>会员id号</span>
                      <el-input v-model="item_search.memberId" style="width: 60px"></el-input>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="grid-content bg-purple">
                      <span>真实姓名</span>
                      <el-input v-model="item_search.realName" style="width: 60px"></el-input>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="grid-content bg-purple">
                      <span>手机号</span>
                      <el-input v-model="item_search.phone" style="width: 60px"></el-input>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="grid-content bg-purple">
                      <span>会员卡号</span>
                      <el-input v-model="item_search.memberCode" style="width: 60px"></el-input>
                    </div>
                  </el-col>
                  <el-button class="but_cx" type="primary" @click="member_search">查询</el-button>
                </el-row>
              </div>
              <div class="member_footer">
                <el-table :data="
                    tableData.slice(
                      (currentPage - 1) * pagesize,
                      currentPage * pagesize
                    )
                  " border style="width: 100%" :row-style="{height:'35px'}" :cell-style="{padding:'0px'}">
                  <el-table-column prop="uid" label="会员ID号" width="180">
                  </el-table-column>
                  <el-table-column prop="nickname" label="昵称" width="180">
                  </el-table-column>
                  <el-table-column prop="address" label="真实姓名">
                  </el-table-column>
                  <el-table-column prop="mobile" label="手机号">
                  </el-table-column>
                  <el-table-column prop="card_num" label="会员卡号">
                  </el-table-column>
                  <el-table-column prop="putaway" label="等级">
                  </el-table-column>
                  <el-table-column prop="point" label="积分">
                  </el-table-column>
                  <el-table-column prop="created_at" label="注册时间">
                  </el-table-column>
                  <el-table-column prop="address" label="操作">
                    <template slot-scope="scope">
                      <el-link type="danger" @click="changeMsgState(scope.row)" v-if='scope.row.comment_state==0'>禁言
                      </el-link>
                      <el-link type="success" @click="changeMsgState(scope.row)" v-else>允许发言</el-link>
                      <el-button @click="goon(scope.row.uid)" type="text" size="small">详情</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="block">
                <el-pagination background layout="prev, pager, next" :total="total" @current-change="current_change">
                </el-pagination>
              </div>
            </div>
          </el-tab-pane>
          <!-- 点击禁言会员 -->
          <el-tab-pane label="禁言会员" name="second">
            <div class="men_jy">
              <div class="men_fe"></div>
              <div>
                <el-row :gutter="20">
                  <el-col :span="6">
                    <div class="grid-content bg-purple">
                      <span>会员id号</span>
                      <el-input v-model="item_search.memberId" style="width: 60px"></el-input>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="grid-content bg-purple">
                      <span>真实姓名</span>
                      <el-input v-model="item_search.realName" style="width: 60px"></el-input>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="grid-content bg-purple">
                      <span>手机号</span>
                      <el-input v-model="item_search.phone" style="width: 60px"></el-input>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="grid-content bg-purple">
                      <span>会员卡号</span>

                      <el-input v-model="item_search.memberCode" style="width: 60px"></el-input>
                    </div>
                  </el-col>
                  <el-button class="but_cx" @click="member_search" type="primary">查询
                  </el-button>
                </el-row>
              </div>
              <div class="member_footer">
                <el-table :data="
                    tableData.slice(
                      (currentPage - 1) * pagesize,
                      currentPage * pagesize
                    )
                  " border style="width: 100%" :row-style="{height:'35px'}" :cell-style="{padding:'0px'}">
                  <el-table-column prop="uid" label="会员ID号" width="180">
                  </el-table-column>
                  <el-table-column prop="nickname" label="昵称" width="180">
                  </el-table-column>
                  <el-table-column prop="realname" label="真实姓名">
                  </el-table-column>
                  <el-table-column prop="mobile" label="手机号">
                  </el-table-column>
                  <el-table-column prop="card_num" label="会员卡号">
                  </el-table-column>
                  <el-table-column prop="level" label="等级">
                  </el-table-column>
                  <el-table-column prop="point" label="积分">
                  </el-table-column>
                  <el-table-column prop="created_at" label="注册时间">
                  </el-table-column>
                  <el-table-column prop="address" label="操作">
                    <template slot-scope="scope">
                      <el-link type="success" @click="allow(scope.row)">允许发言</el-link>

                      <el-button type="text" size="small" @click="goon">详情</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="block">
                <el-pagination background layout="prev, pager, next" :total="total" @current-change="current_change">
                </el-pagination>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
  import { getmember, getchangeMsgState } from "../request/index";
  export default {
    data() {
      return {
        memberid: "",
        forbiddenWords: '',
        userAllNum: '',
        cardtf: false,
        pageChecked: true,
        input1: "",
        sousuok: false,

        multipleSelection: [],
        total: 1,
        pagesize: '',
        currentPage: 1,
        activeName: "first",
        input9: "",
        ipt_pne: "",
        ipt_id: "",
        ipt_name: "",
        ipt_mebcard: "",
        uid: "",
        item_search: {
          memberId: "",
          realName: "",
          phone: "",
          memberCode: ""
        },
        tableData: [
          {
            date: "",
            name: "",
            address: "",
            shoplist: "",
            time: "",
            putaway: "",
            whether: "",
            timer: "",
          },
        ],
        aa: 0,
      };
    },
    methods: {
      //翻页
      current_change(val) {
        console.log("当前页：", val);
        getmember({ page: val }).then(res => {
          console.log(res);
          this.tableData = res.list
        })
      },
      //全部会员搜索

      member_search() {
        getmember(this.item_search).then(res => {
          console.log(res);
          this.tableData = res.list
        })
      },
      init() {
        console.log(this.aa, 'fffff');
        if (this.aa == 0) {
          console.log("会员");
          getmember().then((res) => {
            console.log(res.list);
            // console.log(res.data.pageSize);
            this.pagesize = res.pageSize;
            this.total = res.totalPage
            this.tableData = res.list
            this.userAllNum = res.userAllNum
            this.forbiddenWords = res.forbiddenWords
            // this.memberid=res.data.memberId
            // console.log(res.data.memberId);
            // console.log(this.userAllNum);
            // console.log(this.tableData.date);
            // res.data.list.forEach((item) => {
            //   console.log(item.mobile);
            // });

          });
        } else {
          console.log("请求禁言");
          getmember({ forbiddenState: 1 }).then(res => {
            console.log(res);
            this.tableData = res.list

          })
        }
      },
      handleClick(v) {
        if (v) {
          this.aa = v.index
        }

        this.init()

      },
      current_change: function (currentPage) {
        this.currentPage = currentPage;
      },

      // getmemberlist() {
      // console.log("全部会员");

      // },
      //禁言状态
      changeMsgState(row) {
        console.log(row);
        this.$confirm('确定要禁言/接触禁言该用户?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let data = {
            memberId: row.uid,
            commentState: row.comment_state == 0 ? 1 : 0
          }
          getchangeMsgState(data).then(res => {
            console.log(res);
            console.log(res.msg);
            if (res.code == 666) {
              this.init()
              this.$message({
                message: res.msg,
                type: 'success'
              })
            } else {
              this.$message({
                message: res.msg,
                type: 'error'
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });




      },
      allow(row) {
        let data = {
          memberId: row.uid,
          commentState: 0
        }
        getchangeMsgState(data).then(res => {
          console.log(res);

          if (res.code == 666) {
            this.$message({
              message: res.msg,
              type: 'success'
            })
          } else {
            this.$message({
              message: res.msg,
              type: 'error'
            })
          }
        })
      },
      goon(uid) {
        //   this.$router.push("/merpar");
        this.$router.push({
          path: "/merpar",
          query: {
            id: uid
          }
        })


      },
    },
    mounted() {
      this.init()
      this.handleClick()
      this.current_change
    },
  };
</script>



<style scoped>
  .el-tabs__item {
    font-size: 16px;
    font-weight: 700;
  }

  .men_fe {
    width: 100%;
    height: 25px;
    background-color: #f3f5fa;
  }

  .member_footer {
    width: 100%;
    /* background-color: red; */
    position: relative;
    top: 15px;
    border-radius: 10px;
    height: 620px;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    margin-top: 30px;
  }

  .but_cx {
    position: absolute;
    right: 0px;
    top: 30px;
  }

  div /deep/ .el-input__inner {
    width: 208px;
  }

  .el-input__inner {
    width: 213px;
  }

  .element.style {
    padding-left: 10px;
    margin-top: 27px;
    padding-right: 10px;
  }

  div /deep/ .el-tabs__nav-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #fff !important;
    z-index: 1;
  }

  element.style {
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 27px;
  }

  element.style {
    padding-left: 10px;
    margin-top: 27px;
    padding-right: 10px;
  }

  element.style {
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 27px;
  }

  .el-col-6 {
    width: 18%;
  }

  .grid-content bg-purple {
    width: 100px;
  }

  .el-row {
    margin-bottom: 20px;
    width: 95%;
  }

  .el-col {
    border-radius: 4px;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .el-table--border th.el-table__cell,
  .el-table__fixed-right-patch {
    border-bottom: 1px solid #ebeef5;
    background-color: #f2f6fc;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .s_hy {
    vertical-align: -5px;
  }

  .ipt_hy {
    display: inline-block;
    position: absolute;
    width: 100px !important;
  }

  .el-input__inner {
    width: 207px;
  }

  .bgc_3a {
    width: 100%;
    height: 25px;
    background-color: #f3f5fa;
  }

  .reg {
    background-color: #fff;
  }

  .btn_reg {
    width: 250px;
    position: absolute;
    bottom: 25px;
    right: 200px;
    background-color: #2a78ff;
  }

  .reg>ul>li {
    margin-top: 45px;
    margin-left: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    list-style-type: circle;
  }

  .el-menu-item is-active {
    background-color: red;
  }

  .el-input__inner {
    width: 400px;
  }

  #pane-first {
    height: 645px;
  }

  .privatekey {
    position: relative;
    height: 900px;
  }

  .zf {
    /* background-color: #fff; */
    margin-top: 30px;
    height: 740px;
  }

  .jiekou {
    margin-left: 50px;
  }

  .el-tabs__item {
    font-size: 16px;
    font-weight: 700;
  }

  .el-tabs__item {
    padding: 0 48px;
  }

  #tab-first {
    padding-left: 20px;
  }

  .reg {
    width: 600px;
    height: 350px;
    border: 1px solid #000;
    position: relative;
    top: 150px;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    border: 1px solid #dcdfe6;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 5px;
  }

  .block {
    position: absolute;
    bottom: 30px;
    left: 530px;
  }

  .snow_footer {
    width: 100%;
    background-color: #fff;
    position: relative;
    top: 50px;
    border-radius: 10px;
    height: 650px;
  }

  .query_2 {
    position: absolute;
    left: 300px;
    top: 90px;
  }

  .snow_btn {
    position: absolute;
    right: -1300px;
    top: 0px;
  }

  .nav_hedr {
    width: 100%;
    height: 145px;
    background-color: #fff;
    position: relative;
    top: 20px;
    border-radius: 10px;
  }

  .snow_list {
    width: 98%;
    height: 40px;
    background-color: #ebf4ff;
    position: absolute;
    left: 25px;
    top: 10px;
    border-radius: 5px;
  }

  .shop_list {
    width: 98%;
    height: 40px;
    background-color: #ebf4ff;
    position: absolute;
    left: 1%;
    top: 10px;
    border-radius: 5px;
    line-height: 40px;
  }

  .snow_list {
    line-height: 40px;
  }

  .text_1 {
    color: #3d85ff;
    font-size: 20px;
  }

  .text_2 {
    color: #3d85ff;
    font-size: 20px;
  }

  .snow_name {
    display: inline-block;
    width: 200px;
    height: 25px;
  }

  .query {
    position: absolute;
    left: 25px;
    top: 90px;
  }

  .el-input__inner {
    height: 35px;
    margin-left: 5px;
  }

  .zf {
    /* background-color: #fff; */
    margin-top: 30px;
    height: 740px;
  }

  .jiekou {
    margin-left: 50px;
  }

  .el-tabs__item {
    font-size: 16px;
    font-weight: 700;
  }

  .el-tabs__item {
    padding: 0 48px;
  }

  #tab-first {
    padding-left: 20px;
  }

  .el-tabs el-tabs--top {
    position: absolute;
    top: -25px;
    background-color: red;
  }

  .el-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-width: 0;
    height: 100%;
  }

  element.style {
    position: absolute;
    top: 15px;
    margin-left: -27px;
    width: 1648px;

  }

  .men_jy {
    width: 100%;
    height: 645px;
    background-color: #fff;
  }

  .men_id {
    width: 100%;
    height: 645px;
    background-color: #fff;
    position: absolute;
    z-index: 100;
  }

  .nav_header {
    width: 100%;
    height: 145px;
    background-color: #fff;
    position: relative;
    top: 20px;
    border-radius: 10px;
  }

  .mem_tag {
    position: absolute;
    top: 90px;
    width: 100%;
  }

  #member {
    width: 100%;
    height: 800px;
    /* background-color: red; */
  }

  .shoplist {
    width: 100%;
  }

  div /deep/ #tab-first {
    padding-left: 20px;
    font-size: 16px;
    font-weight: 700;

  }

  div /deep/ #tab-second {
    font-size: 16px;
    font-weight: 700;
  }
</style>